<template>
    <a-collapse forceRender accordion :bordered='false'>
        <a-collapse-panel v-for='(row, index) in rows' :header='row[labelFieldName]' :key='row[valueFieldName]'>
            <template v-if='row[childrenFieldName][0][childrenFieldName] == undefined'>
                <div :class='$style.rowContainer'>
                    <template v-for='(item, i) in row[childrenFieldName]'>
                        <a-button type='dashed' @click='select(item)'>{{item[labelFieldName]}}</a-button>
                    </template>
                </div>
            </template>
            <template v-else>
                <XCollapse :selectedApi='selectedApi' :rows='row[childrenFieldName]' :valueFieldName='valueFieldName' :labelFieldName='labelFieldName' :childrenFieldName='childrenFieldName'  />
            </template>
            <!-- <template v-if='index == 0'>
                <template v-if='row[childrenFieldName] && row[childrenFieldName].length > 0'>
                    <template v-for='(item, i) in row[childrenFieldName]'>
                        <template v-if='row[childrenFieldName] && row[childrenFieldName].length > 0'>
                            <XCollapse :rows='row[childrenFieldName]' :valueFieldName='valueFieldName' :labelFieldName='labelFieldName' :childrenFieldName='childrenFieldName'  />
                        </template>
                        <template v-else>
                            <span>{{row[labelFieldName]}}</span>
                        </template>
                    </template>
                </template>
            </template> -->
        </a-collapse-panel>
    </a-collapse>
</template>

<script lang='ts' setup>
    const { selectedApi } = withDefaults(defineProps<{
        rows : any[],
        valueFieldName : string,
        labelFieldName : string,
        childrenFieldName : string,
        selectedApi : (data : any) => void
    }>(), {
        rows : () => [],
        valueFieldName : 'id',
        labelFieldName : 'label',
        childrenFieldName : 'children'
    })

    const emit = defineEmits<{
        (e : 'selected', data : any) : void
    }>()

    function select(item) {
        selectedApi(item)
    }
</script>

<style scoped module>
    .rowContainer{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
</style>